<template>
  <div id="app">
    <Navbar />
    <main>
      <!-- 课程分类及筛选部分，宽度占满屏幕 -->
      <div class="full-width-bg">
        <!-- 标签导航 -->
        <div class="course-nav-tabs">
          <div class="tab-item" :class="{ active: selectedTab === 'category' }" @click="selectedTab = 'category'">
            课程分类
          </div>
          <div class="tab-item" :class="{ active: selectedTab ==='subCategory' }" @click="selectedTab ='subCategory'">
            二级分类
          </div>
          <div class="tab-item" :class="{ active: selectedTab === 'price' }" @click="selectedTab = 'price'">
            课程收费
          </div>
        </div>
        <!-- 分类筛选 -->
        <div class="course-filters">
          <!-- 课程分类 -->
          <div class="filter-group" v-if="selectedTab === 'category'">
            <span :class="{ active: selectedCategoryId === 'ALL' }" @click="selectCategory({ id: 'ALL', name: '全部' })">全部</span>
            <span v-for="category in courseCategories" :key="category.id" :class="{ active: selectedCategoryId === category.id }" @click="selectCategory(category)">
              {{ category.name }}
            </span>
          </div>
          <!-- 课程二级分类 -->
          <div class="filter-group" v-if="selectedTab ==='subCategory'">
            <span :class="{ active: selectedSubCategoryId === 'ALL' }" @click="selectSubCategory({ id: 'ALL', name: '全部' })">全部</span>
            <span v-for="subCategory in getCurrentSubCategories" :key="subCategory.id" :class="{ active: selectedSubCategoryId === subCategory.id }" @click="selectSubCategory(subCategory)">
              {{ subCategory.name }}
            </span>
          </div>
          <!-- 课程收费 -->
          <div class="filter-group" v-if="selectedTab === 'price'">
            <span :class="{ active: selectedPriceRange === 'ALL' }" @click="selectedPriceRange = 'ALL'">全部</span>
            <span :class="{ active: selectedPriceRange === 'free' }" @click="selectedPriceRange = 'free'">免费</span>
          </div>
        </div>
      </div>
      <!-- 面包屑导航、搜索框和课程展示部分 -->
      <div class="course-center-page">
        <div class="breadcrumb-search">
          <div class="breadcrumb">
            <span>首页</span> > <span>课程</span> > <span>课程列表</span>
          </div>
          <input type="text" v-model="searchQuery" placeholder="搜索课程" @input="filterCoursesBySearch">
        </div>
        <!-- 课程展示 -->
        <div class="course-cards-container">
          <div v-if="displayedCourses.length === 0" class="no-courses-message">
            没有相关课程
          </div>
          <div v-for="(course, index) in displayedCourses" :key="index" class="course-item">
            <img :src="course.imageUrl" alt="课程图片" />
            <p>{{ course.description }}</p>
          </div>
        </div>
      </div>
    </main>
    <Footer />
  </div>
</template>

<script setup>
import { ref, computed } from 'vue';
import Navbar from "@/components/Navbar/Navbar.vue";
import Footer from "@/components/Footer/Footer.vue";

// 模拟从数据库查询的课程分类数据，添加了 id 字段
const courseCategories = [
  {
    id: '1',
    name: '电子通信',
    subCategories: [
      { id: '1-1', name: '基础通信' },
      { id: '1-2', name: '高级通信' }
    ]
  },
  {
    id: '2',
    name: '智能控制',
    subCategories: [
      { id: '2-1', name: '自动化控制' },
      { id: '2-2', name: '智能算法' }
    ]
  },
  {
    id: '3',
    name: '工业互联网',
    subCategories: []
  },
  {
    id: '4',
    name: '信息安全',
    subCategories: [
      { id: '4-1', name: '数据安全' },
      { id: '4-2', name: '网络安全' }
    ]
  }
];

// 模拟课程数据，添加分类 id 和二级分类 id
const courses = [
  {
    id: 'c1',
    imageUrl: 'https://b0.bdstatic.com/e850f42a82ca4749de608a876c53fc1d.jpg',
    description: '这是课程1的简介，主要讲解电子通信相关知识。',
    categoryId: '1',
    subCategoryId: '1-1',
    price: 0
  },
  {
    id: 'c2',
    imageUrl: 'https://b0.bdstatic.com/e850f42a82ca4749de608a876c53fc1d.jpg',
    description: '课程2专注于智能和控制系统工程。',
    categoryId: '2',
    subCategoryId: '2-1',
    price: 99
  },
  {
    id: 'c3',
    imageUrl: 'https://b0.bdstatic.com/e850f42a82ca4749de608a876c53fc1d.jpg',
    description: '本课程介绍工业互联网的应用。',
    categoryId: '3',
    subCategoryId: null,
    price: 0
  },
  {
    id: 'c4',
    imageUrl: 'https://b0.bdstatic.com/e850f42a82ca4749de608a876c53fc1d.jpg',
    description: '课程4涉及信息安全领域。',
    categoryId: '4',
    subCategoryId: '4-1',
    price: 199
  }
];

// 用于存储选中的标签
const selectedTab = ref('category');
// 用于存储选中的分类和子分类的 id
const selectedCategoryId = ref('ALL');
const selectedSubCategoryId = ref('ALL');
// 用于存储选中的价格范围
const selectedPriceRange = ref('ALL');
// 用于存储搜索查询
const searchQuery = ref('');

// 计算当前选中分类的二级分类
const getCurrentSubCategories = computed(() => {
  const category = courseCategories.find(cat => cat.id === selectedCategoryId.value);
  return category? category.subCategories : [];
});

// 计算过滤后的课程列表
const filteredCourses = computed(() => {
  return courses.filter(course => {
    let categoryMatch = true;
    let subCategoryMatch = true;
    let priceMatch = true;

    if (selectedCategoryId.value!== 'ALL') {
      categoryMatch = course.categoryId === selectedCategoryId.value;
    }

    if (selectedSubCategoryId.value!== 'ALL' && categoryMatch) {
      subCategoryMatch = course.subCategoryId === selectedSubCategoryId.value;
    }

    if (selectedPriceRange === 'free') {
      priceMatch = course.price === 0;
    } else if (selectedPriceRange!== 'ALL') {
      priceMatch = course.price > 0;
    }

    return categoryMatch && subCategoryMatch && priceMatch;
  });
});

// 根据搜索查询过滤课程
const displayedCourses = computed(() => {
  if (searchQuery.value === '') {
    return filteredCourses.value;
  }
  return filteredCourses.value.filter(course =>
      course.description.includes(searchQuery.value)
  );
});

const selectCategory = (category) => {
  selectedCategoryId.value = category.id;
  if (category.id === 'ALL') {
    selectedSubCategoryId.value = 'ALL';
  } else {
    const categoryObj = courseCategories.find(cat => cat.id === category.id);
    if (!categoryObj || categoryObj.subCategories.length === 0) {
      selectedSubCategoryId.value = 'ALL';
    } else {
      // 当选择有二级分类的课程分类时，默认二级分类为全部
      selectedSubCategoryId.value = 'ALL';
    }
  }
};

const selectSubCategory = (subCategory) => {
  selectedSubCategoryId.value = subCategory.id;
};

const filterCoursesBySearch = () => {
  // 当搜索框输入变化时，会自动触发 displayedCourses 的重新计算
};
</script>

<style scoped>
/* 整体页面布局 */
body {
  margin: 0;
  padding: 0;
  font-family: Arial, sans-serif;
}

.full-width-bg {
  background-color: #f4f4f4; /* 浅灰色背景 */
  width: 100%; /* 宽度占满屏幕 */
  padding: 0; /* 去除上下内边距 */
  margin-top: 60px; /* 确保没有外边距 */
}

.course-nav-tabs {
  display: flex;
  max-width: 1200px;
  margin: 0 auto; /* 居中显示 */
  padding: 10px 0; /* 适当调整标签导航内边距 */
}

.course-filters {
  display: flex;
  max-width: 1200px;
  margin: 0 auto; /* 居中显示 */
  padding: 10px 0; /* 适当调整分类筛选内边距 */
}

.tab-item {
  padding: 10px 20px;
  cursor: pointer;
}

.tab-item.active {
  background-color: #ccc;
}

.filter-group {
  display: flex;
  gap: 10px;
}

.filter-group span {
  cursor: pointer;
}

.filter-group span.active {
  background-color: #ccc;
}

.course-center-page {
  max-width: 1200px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 20px; /* 内边距 */
}

.breadcrumb-search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.breadcrumb {
  text-align: left;
}

.course-cards-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}

.course-item {
  width: calc(25% - 10px);
  margin: 5px;
  text-align: center;
}

.course-item img {
  width: 100%;
  height: auto;
  margin-bottom: 10px;
}

.no-courses-message {
  width: 100%;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}
</style>